import React from 'react';
import classnames from 'classnames';
import ReSlider from '../ReSlider';
import ReIconButton from '../ReIconButton';
import ReTips from '../ReTips';

export default class view extends React.Component {
    static propTypes = {
        className: React.PropTypes.string,
        percent: React.PropTypes.number,
        isPlay: React.PropTypes.bool,
        isSelectedStop: React.PropTypes.bool,
        onPercentUpdate: React.PropTypes.func,
        onPlayStatusChange: React.PropTypes.func,
        pauseTipsLabel: React.PropTypes.string,
        playTipsLabel: React.PropTypes.string,
        stopTipsLabel: React.PropTypes.string,
        sliderTipsLabel: React.PropTypes.string,
        animationCurrentValue: React.PropTypes.oneOfType([
            React.PropTypes.string,
            React.PropTypes.number
        ]),
        animationList: React.PropTypes.array,
        onAnimationChange: React.PropTypes.func,
        onStop: React.PropTypes.func,
        progress: React.PropTypes.array,
        progressTipsLabel: React.PropTypes.string,
        onProgressToggle: React.PropTypes.func,
        onDragStart: React.PropTypes.func,
        onDragStop: React.PropTypes.func,
    };

    static defaultPorps = {
        onDragStart: () => {},
        onDragStop: () => {},
        isSelectedStop: false
    }


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            percent: props.percent,
            isPlay: props.isPlay,
            animationCurrentValue: props.animationCurrentValue,
            animationList: props.animationList,
            animationCurrent: {},
            animationIsShow: false,
            sliderTipsLabel: props.sliderTipsLabel,
            progressType: true,
            isSelectedStop: props.isSelectedStop
        };
    }
    componentWillMount() {
        this._isMounted = true;

    }

    componentDidMount() {
        this.state.animationList.forEach((item)=> {
            if(item.value === this.state.animationCurrentValue) {
                this.setState({
                    animationCurrent: item
                })
            }
        })
    }

    componentWillReceiveProps({ percent, isPlay, animationLabel, animationList, animationCurrentValue, sliderTipsLabel, progress, progressTipsLabel, isSelectedStop}) {
        let animationCurrent = {};
        animationList.forEach((item)=> {
            if(item.value === animationCurrentValue) {
                animationCurrent = item;
            }
        })
        this.setState({
            percent,
            isPlay,
            animationLabel,
            sliderTipsLabel,
            progress,
            progressTipsLabel,
            animationList,
            animationCurrent,
            animationCurrentValue,
            isSelectedStop
        })
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    handleSliderUpdate = ({ value }) => {
        this.props.onPercentUpdate && this.props.onPercentUpdate(value)
    }

    handlePlayStatusClick = () => {
        let isPlay = this.state.isPlay;
        this.setState({
            isPlay: !isPlay
        });
        this.props.onPlayStatusChange && this.props.onPlayStatusChange(!isPlay);
    }

    handleCheckAnimationClick(item) {
        this.setState({
            animationCurrentValue: item.value,
            animationIsShow: false,
        });
        this.props.onAnimationChange && this.props.onAnimationChange(item);
    }

    handleAnimationToggleClick = () => {
        this.setState({
            animationIsShow: !this.state.animationIsShow
        });
    }

    handleStopClick = () => {
        this.setState({
            animationIsShow: false,
            percent: 0
        });
        this.props.onStop && this.props.onStop();
        this.props.onPercentUpdate && this.props.onPercentUpdate(0);
    }

    handleProgressToggle = ()=> {
        let progressType =  this.state.progressType
        this.setState({
            progressType: !progressType
        });
        this.props.onProgressToggle && this.props.onProgressToggle(!progressType);
    }

    renderBar() {
        return (
            <div className="orin-sw-replayer-bar">
                <ReSlider
                    className="player-slider"
                    min={ 0 }
                    max={ this.state.animationCurrent.duration }
                    value={ this.state.percent }
                    toFixed={3}
                    onDragStart={this.props.onDragStart}
                    onDragStop={this.props.onDragStop}
                    onUpdate={ this.handleSliderUpdate }
                    tips={ 
                        <ReTips label={ this.state.sliderTipsLabel } />
                    }
                />
            </div>
        );
    }

    renderToolPlay() {
        let icon = this.state.isSelectedStop ? 'stop1' : this.state.isPlay ? 'zanting': 'start',
            btnTipsLabel = this.state.isSelectedStop ? this.props.stopTipsLabel : this.state.isPlay ? this.props.pauseTipsLabel : this.props.playTipsLabel
        return (
            <ReIconButton
                className={classnames({'re-player-stop-btn': this.state.isSelectedStop})}
                icon={ icon }
                tooltip={ btnTipsLabel }
                disabled={this.state.isSelectedStop}
                onClick={ this.handlePlayStatusClick }
            />
        );
    }

    renderToolTime() {
        return (
            <div className="time-text" onClick={ this.handleProgressToggle }>
                {
                    this.props.progress.map( (item,index)=> {
                        let itemClassName = ''
                        if(index === 1){
                            itemClassName = 'line'
                        }
                        return (
                            <span key={ index } className={ itemClassName }>{ item }</span>
                        );
                    })
                }
                <ReTips label={ this.props.progressTipsLabel }/>
            </div>
        )
    }

    renderAnimation() {
        const animationClassNames = classnames({
            'animation-text': true,
            'show': this.state.animationIsShow ? true: false
        })
        return (
            <div className={ animationClassNames }>
                <div 
                    className="select-title"
                    onClick={ this.handleAnimationToggleClick } >
                    { this.state.isSelectedStop ? this.props.stopTipsLabel : this.state.animationCurrent.label }
                </div>
                <dl className="select-list">
                    <dt 
                        onClick={ this.handleStopClick } 
                        className={this.state.isSelectedStop ? 'active' : ''}
                    > 
                        
                        <span>{this.props.stopTipsLabel}</span>
                        <i></i>
                    </dt>
                    {
                        this.state.animationList.map(item => {
                            return (
                                <dd className={classnames({active: (!this.state.isSelectedStop && (item.value === this.state.animationCurrentValue)) ? true : false })}
                                    key={ item.value }
                                    onClick={ () => { this.handleCheckAnimationClick(item) }}
                                >
                                    <span>{ item.label }</span>
                                    <i></i>
                                </dd>
                            );
                        })
                    }
                </dl>
            </div>
        );
    }

    renderTools() {
        return(
            <ul className="orin-sw-replayer-tools">
                <li>{ this.renderToolPlay() }</li>
                <li>{ this.renderToolTime() }</li>
                <li>{ this.renderAnimation() }</li>
            </ul>
        );
    }

    render() {
        const classNames = classnames({
            'orin-sw-replayer-root': true,
            [this.props.className]: this.props.className ? true : false
        })
        return (
            <div className={ classNames } >
                { this.renderBar() }
                { this.renderTools() }
            </div>
        );
    }
}
